<template>
    <div class="report-second-child">
        <div class="report-second-child-title">
            <div style="float:left">
                <div style="line-height:55px;">
                    <span style="color:#212121;font-size:20px;">{{fanjuXinxi}}</span>
<!--                    <a href="">-->
<!--                        <span style="color:#fd4c5d;font-size:14px;margin-left:5px;">-->
<!--                        <i class="el-icon-refresh"></i>换一批</span>-->
<!--                    </a>-->
                </div>
            </div>
            <div style="float:right;margin-right:10px;line-height:55px;">

<!--                <a href="" >-->
<!--                    <span class="import-href">-->
<!--                        【抗击肺炎大作战】驰援武汉医护人员-->
<!--                    </span>-->
<!--                </a>-->

                <a href="">
                    <span style="color:#fd4c5d;font-size:14px;">
                        更多<i class="el-icon-arrow-right"></i>
                    </span>
                </a>
            </div>
        </div>

        <div class="report-second-child-1">
            <div class="report-second-child-3">
                <showHoverMaskWithOutCharPlus v-if="res.length>0" :video-info="res[0]"></showHoverMaskWithOutCharPlus>
            </div>
            <div class="report-second-child-3">
                <div class="report-second-child-4">
                    <showHoverMaskWithOutCharacters  v-if="res.length>1" :video-info="res[1]"></showHoverMaskWithOutCharacters>
                </div>
                <div class="report-second-child-4">
                    <showHoverMaskWithOutCharacters v-if="res.length>2" :video-info="res[2]"></showHoverMaskWithOutCharacters>
                </div>
                <div class="report-second-child-4">
                    <showHoverMaskWithOutCharacters v-if="res.length>3" :video-info="res[3]"></showHoverMaskWithOutCharacters>
                </div>
                <div class="report-second-child-4">
                    <showHoverMaskWithOutCharacters v-if="res.length>4" :video-info="res[4]"></showHoverMaskWithOutCharacters>
                </div>
            </div>
        </div>
        <div class="report-second-child-2">
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>5" :video-info="res[5]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>6" :video-info="res[6]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>7" :video-info="res[7]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>8" :video-info="res[8]"></showHoverMaskWithOutCharacters>
            </div>
        </div>
    </div>
</template>

<script>
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";
    import showHoverMaskWithOutCharPlus from "@/components/showHoverMaskWithOutCharPlus";

    export default {
        components:{showHoverMaskWithOutCharacters,showHoverMaskWithOutCharPlus},
        name: 'reportSecondChild',
        props: {
            reportIndex: {   // 可选字段，有默认值
                type: Number
            }
        },
        data () {
            return {
                paigangbangForm:{
                    fenquParent:''
                },
                res:[],
                fanjuXinxi:''
            }
        },
        mounted(){
            var self = this;
            if(self.reportIndex===1){
                self.paigangbangForm.fenquParent = "01-fanju";
                self.fanjuXinxi = '番剧信息';
                //查找动漫区前11的视频
                self.$api.post('paihangbang/getPaihangbangTop9',self.paigangbangForm, result => {
                    self.res = result;
                });
            }
        }
    }
</script>

<style scoped>
    .report-second-child{
        width:670px;
        height:550px;
    }

    .report-second-child-title{
        height:60px;
        width:664px;
    }

    .report-second-child-1{
        width:668px;
        height:300px;
    }

    .report-second-child-2{
        width:668px;
        height:150px;
    }

    .report-second-child-3{
        width:334px;
        height:320px;
        float:left;
    }

    .report-second-child-4{
        width:167px;
        min-height:150px;
        float:left;
        /*background-color:blue;*/
    }
    .import-href{
        color:#333333;
        font-size:14px;
        margin-right:50px;
        cursor: pointer;
    }

    .import-href:hover{
        color:#fd4c5a;
    }

</style>
